<template>
	<view class="con">
		<view class="top">
			<view class="nav">
				<view class="status_bar">
					<!-- 这里是状态栏 -->
				</view>
				<!-- 搜索框 -->
				<view class="search_box">
					<view class="input-box">
						<image src="../../static/mall/search.png" mode=""></image>
						<input class="input-text" type="text" placeholder="电子药盒" placeholder-style="color:#fff" v-model="text"/>
						<view class="sc" @click="tolist">搜索</view>
					</view>
					<image src="../../static/mall/car.png" mode="" class="car" @click="gocart"></image>
				</view>
			</view>
			<swiper indicator-active-color="#EC5F2A" :autoplay="true" :interval="3000" indicator-color="#fff"
				:indicator-dots="true" :circular="true">
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/mall/banner.png"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/mall/banner.png"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="item_box">
			<view @click="follow">
				<image src="../../static/mall/i1.png" class="itemimg"></image>
				<view>新品上市</view>
			</view>
			<view @click="typelist('/pages/index/povertyAlleviation/product?type=mall')">
				<image src="../../static/mall/i2.png" class="itemimg"></image>
				<view>扶贫产品</view>
			</view>
			<view @click="snapup">
				<image src="../../static/mall/i3.png" class="itemimg"></image>
				<view>秒杀专区</view>
			</view>
			<view @click="typelist('/pages/product/productlist?type=0')">
				<image src="../../static/mall/i4.png" class="itemimg"></image>
				<view>积分专区</view>
			</view>
			<view @click="typelist('/pages/product/productlist?type=1')">
				<image src="../../static/mall/i5.png" class="itemimg"></image>
				<view>现金专区</view>
			</view>
			<view @click="follow">
				<image src="../../static/mall/i6.png" class="itemimg"></image>
				<view>特惠专区</view>
			</view>
			<view @click="follow">
				<image src="../../static/mall/i7.png" class="itemimg"></image>
				<view>预付专区</view>
			</view>
			<view @click="typelist('/pages/product/productlist?type=2')">
				<image src="../../static/mall/i8.png" class="itemimg"></image>
				<view>混合专区</view>
			</view>
		</view>
		<view class="goodsbox">
			<view class="goodsitem" v-for="(item,index) in list" @click="top(item.goodsId)">
				<image :src="item.picUrl" mode="aspectFill" class="goodimg"></image>
				<view class="goods_b">
					<view class="goodsTitle">{{item.name}}</view>
					<view class="price" v-if="item.isEnableGrade==0">{{item.retailIntegral}}积分</view>
					<view class="price" v-if="item.isEnableGrade==1">￥{{item.retailPrice}}</view>
					<view class="price" v-if="item.isEnableGrade==2">￥{{item.retailPrice}}+{{item.retailIntegral}}积分
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		productlist
	} from "../../api/product.js"
	export default {
		components: {},
		data() {
			return {
				text:"",
				num:1,
				list:[]
			};
		},
		// 
		onLoad() {
			this.getlist()
		},
		onShow() {},
		onReachBottom() {
			this.getlist()
		},

		//下拉刷新
		onPullDownRefresh() {},
		methods: {
			follow(){
				this.msg("敬请期待","none")
			},
			// 获取数据
			async getlist() {
				let data = {
					pageNum: this.num,
					pageSize: 10,
				}
				let res = await this.get(productlist, data)
				this.list = [...this.list, ...res.data]
				this.num++
			},
			snapup(){
				if(this.Md.islogin()){
					uni.navigateTo({
						url:"/pages/Mall/snapup"
					})
				}
			},
			gocart(){
				uni.navigateTo({
					url:"../cart/cart"
				})
			},
			tolist(){
				if(this.text.trim()!=''){
					uni.navigateTo({
						url:"/pages/product/productlist?text="+this.text
					})
				}else{
					this.msg("未输入关键字","none")
				}
			},
			typelist(url){
				uni.navigateTo({
					url:url
				})
			},
			top(id){
				uni.navigateTo({
					url:"/pages/product/product?id="+id
				})
			}
		}
	}
</script>
<style scoped>
	.goodsTitle {
		height: 80rpx;
		font-size: 30rpx;
		color: #333;
		display: -webkit-box;
		/*将对象作为弹性伸缩盒子模型显示*/
		overflow: hidden;
		/* 超出的文本隐藏 */
		text-overflow: ellipsis;
		/* 溢出用省略号显示 */
		word-wrap: break-word;
		/* 文本高出宽度换行 */
		white-space: normal !important;
		/* 溢出不换行 */
		-webkit-line-clamp: 2;
		/* 表示显示的行数 */
		-webkit-box-orient: vertical;
		/* 从上到下垂直排列子元素 */

	}

	.price {
		height: 41rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 52rpx;
		color: #F0812D;
		opacity: 1;
	}

	.goods_b {
		width: 336rpx;
		height: 160rpx;
		padding: 4rpx 16rpx;
		box-sizing: border-box;
	}

	.goodimg {
		width: 336rpx;
		height: 310rpx;
	}

	.goodsitem {
		background-color: #FFFFFF;
		overflow: hidden;
		height: 470rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.con {
		background-color: #f6f6f6;
		min-height: 100vh;
	}

	.goodsbox {
		display: flex;
		width: 690rpx;
		margin-left: 30rpx;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.item_box>view {
		width: 25%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 30rpx;
		font-size: 28rpx;
		line-height: 50rpx;
		color: #333333;
		opacity: 1;
	}

	.item_box {
		width: 690rpx;
		margin-left: 30rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.itemimg {
		width: 70rpx;
		height: 70rpx;
	}

	.swiper-item>image {
		width: 690rpx;
		height: 330rpx;
	}

	swiper-item {
		width: 690rpx;
		height: 330rpx;
	}

	swiper {
		width: 690rpx;
		height: 330rpx;
		margin-top: 30rpx;
		margin-left: 30rpx;
	}

	.car {
		width: 44rpx;
		height: 44rpx;
	}
	.sc{
		position: absolute;
		top:6rpx;
		right: 20rpx;
		font-size: 30rpx;
		color: #FFFFFF
	}
	.input-text {
		width: 630rpx;
		height: 50rpx;
		border: 1px solid #FFFFFF;
		border-radius: 30rpx;
		color: #FFFFFF;
		padding-left: 60rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.input-box {
		position: relative;
	}

	.input-box>image {
		width: 20rpx;
		height: 20rpx;
		position: absolute;
		left: 20rpx;
		top: 15rpx;
	}

	.search_box {
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.top {
		height: calc(var(--status-bar-height) + 500rpx);
		background-image: url(../../static/mall/bg.jpg);
		background-repeat: no-repeat;
		background-size: 750rpx 400rpx;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>
